<template> 
    <div class="group clear-both" @click="jump(item)">
        <div class="group-img float-left">
            <image  class="img"  mode="aspectFit"  :src="'http://renqing123.oss-cn-shenzhen.aliyuncs.com/'+item.thumb"  v-if="item.thumb"></image>
            <div class="describe">
                <p class="title-name">{{item.title}}</p> 
                <div class="info">
                    <span class="info-p">关注&nbsp;{{item.follows}}</span>
                    <span class="info-p">动态&nbsp;{{item.count}}</span>
                </div> 
            </div>
        </div> 
        <div class="group-state float-right" v-if="relev">
            <div class="btn clear-btn" v-if="item.is_attention==1" @click.stop="stateBtn( 1,item)">取消关注</div> 
            <div class="btn" v-if="item.is_attention==0" @click.stop="stateBtn( 2,item)">关注</div> 
        </div>
        <div class="group-state float-right" v-else>
            <div class="btn clear-btn" @click.stop="clearRelev(item)">取消关注</div> 
        </div>
    </div>
</template>

<script>
/***
relev 是否在关注列表中
 */
export default {
    props: {
        item:{
            default:{},
            type:Object
        }, 
        relev:{
            default:true,
            type:Boolean
        }
    },
    methods:{
        stateBtn(val,item){  
            if(val==1){
                this.$emit('clickBtn','clear',item);
            }else{
                this.$emit('clickBtn','add',item);
            }
        },
        clearRelev(item){
            this.$emit('clearRelev',item);
        },
        jump(item){ 
            this.$emit('jump',item);
        },
    }
}
</script>

<style scoped lang="scss">

    .group{   
        background:#fff;
        padding:20rpx;
        box-sizing:border-box;
        border-radius:10rpx;
        margin-bottom:20rpx; 
        .group-img{ 
            display: flex;
            justify-content:center;
            align-items:Center; 
            .img{
                width:120rpx;
                height:120rpx;
                border:0;  
            }
            .describe{ 
                display:inline-block; 
                margin-left:18rpx;
                .title{
                    font-size:28rpx;
                    color:#333; 
                }
                .text-info{
                    margin-top:6rpx;
                    font-size:24rpx;
                    color:#CBCAC9;
                }
                .title-name{
                    font-size:28rpx;
                    color:#303030;
                }
                .info{
                    margin-top:20rpx;
                    color:#999;
                    .info-p{
                        font-size:27rpx;
                        display:inline-block;
                        margin-right:20rpx;
                    } 
                }
            }
        }
        .group-state{ 
            margin-top:30rpx;
            .btn{
                padding:8rpx 20rpx;
                font-size:28rpx;
                color:#fff;
                background:#CD4640;
                border-radius:10rpx;
                &:active{
                    background-color:rgba(205,70,64,0.5)
                }
            }
            .clear-btn{
                color:#949494;
                background:#DEDEDE;
            }
        }
    }

</style>
